<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>订单管理</title>
    <% include("../layout/css.html"){} %>
    <style type="text/css">
        .layui-table-cell-damon {
            height: auto;
            line-height: 28px;
            padding: 0 15px;
            position: relative;
            overflow: visible;/*hidden;*/
            text-overflow: ellipsis;
            white-space: normal;
            box-sizing: border-box;
        }

        #qrcode {
            width:200px;
            margin: 0 auto;
            margin-top: 30px;
        }
        #qrcode + p {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card card-box-shadow">
    	<div class="layui-card-body">
	        <div class="layui-form toolbar">
	            <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">做箱日期：</label>
	                    <div class="layui-input-inline mr0" style="width: 200px">
	                        <input name="packDate" id="packDateSearch" class="layui-input search_key" type="search" placeholder="做箱日期" autocomplete="off" />
                            <!--<div class="layui-icon layui-icon-close inputClear_Damon layui-hide"></div>-->
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">箱号：</label>
	                    <div class="layui-input-inline mr0">
	                        <input name="boxNum" class="layui-input search_key" type="search" placeholder="箱号"/>
                            <!--<div class="layui-icon layui-icon-close inputClear_Damon layui-hide"></div>-->
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">提单号：</label>
	                    <div class="layui-input-inline mr0">
	                        <input name="billOfLading" class="layui-input search_key" type="search" placeholder="提单号"/>
                            <!--<div class="layui-icon layui-icon-close inputClear_Damon layui-hide"></div>-->
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <button class="layui-btn icon-btn" lay-filter="searchSubmit" id="searchSubmit" lay-submit>
	                        <i class="layui-icon">&#xe615;</i>搜索
	                    </button>

                        <!-- 下拉按钮 -->
                        <div class="dropdown-menu dropdown-hover">
                            <button class="layui-btn icon-btn" type="button">
                                &nbsp;更多 <i class="layui-icon layui-icon-drop"></i></button>
                            <ul class="dropdown-menu-nav">
                                <% if(so.hasPermission("bill:add")){ %>
                                    <li><a id="btnAdd"><i class="layui-icon layui-icon-edit"></i>添加</a></li>
                                <% } %>
                                <li><a class="btnTableClick" data-type="delSelect"><i class="layui-icon layui-icon-delete"></i>删除</a></li>
                                <li><a id="btnImport"><i class="layui-icon layui-icon-upload-drag"></i>批量导入</a></li>
                                <li>
                                    <a href="${ctxPath}/assets/file/订单导入模版.xls" target="_blank">
                                        <i class="layui-icon layui-icon-download-circle"></i>下载模板
                                    </a>
                                </li>
                            </ul>
                        </div>
	                </div>
	            </div>
	        </div>
        	<table class="layui-table" id="billTable" lay-filter="billTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
   <!-- <% if(so.hasPermission("bill:update")){ %>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <% } %>-->
    <% if(so.hasPermission("bill:delete")){ %>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <% } %>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelBill">
    <form id="modelBillForm" lay-filter="modelBillForm" class="layui-form model-form">
        <input name="id" id="id" type="hidden"/>
        <input name="companyId" type="hidden"/>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <% if(so.hasPermission("bill:update")){ %>
            <button class="layui-btn" lay-filter="modelBillSubmit" lay-submit>保存</button>
            <% } %>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs8">
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">做箱日期</label>
                        <div class="layui-input-block">
                            <input id="packDate" name="packDate" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入做箱日期"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">客户名称</label>
                        <div class="layui-input-block">
                            <input id="customer" name="customer" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入客户名称"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">工厂地址</label>
                        <div class="layui-input-block">
                            <input id="factoryAddress" name="factoryAddress" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入工厂地址"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-block">
                            <input id="contactsPhone" name="contactsPhone" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入联系电话"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">船名</label>
                        <div class="layui-input-block">
                            <input id="vessel" name="vessel" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入船名"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">航次</label>
                        <div class="layui-input-block">
                            <input id="voyage" name="voyage" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入航次"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">提单号</label>
                        <div class="layui-input-block">
                            <input id="billOfLading" name="billOfLading" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入提单号"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">封号</label>
                        <div class="layui-input-block">
                            <input id="sealno" name="sealno" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入封号"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">箱号</label>
                        <div class="layui-input-block">
                            <input id="boxNum" name="boxNum" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="verification" placeholder="请输入箱号"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">箱型</label>
                        <div class="layui-input-block">
                            <select name="boxType" xm-select="boxType" lay-verType="tips" lay-verify="required">
                                <option value="20GP">20GP</option>
                                <option value="20RH">20RH</option>
                                <option value="20RF">20RF</option>
                                <option value="20TK">20TK</option>
                                <option value="20OT">20OT</option>
                                <option value="20HW">20HW</option>
                                <option value="20HT">20HT</option>
                                <option value="22G1">22G1</option>
                                <option value="22R1">22R1</option>
                                <option value="40RH">40RH</option>
                                <option value="40HC">40HC</option>
                                <option value="40HT">40HT</option>
                                <option value="40OT">40OT</option>
                                <option value="40HQ">40HQ</option>
                                <option value="40GP">40GP</option>
                                <option value="40NOR">40NOR</option>
                                <option value="40HQRF">40HQRF</option>
                                <option value="42G1">42G1</option>
                                <option value="45GP">45GP</option>
                                <option value="45HQ">45HQ</option>
                                <option value="45HC">45HC</option>
                                <option value="45HT">45HT</option>
                                <option value="45G1">45G1</option>
                                <option value="45R1">45R1</option>
                                <option value="L5G1">L5G1</option>
                                <option value="L5GP">L5GP</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">箱门重量</label>
                        <div class="layui-input-block">
                            <input id="weight" name="weight" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入箱门重量"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">序列号</label>
                        <div class="layui-input-block">
                            <input id="serialno" name="serialno" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入序列号"/>
                        </div>
                    </div>

                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">车牌</label>
                        <div class="layui-input-block">
                            <input id="carNo" name="carNo" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入车牌"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">司机电话</label>
                        <div class="layui-input-block">
                            <input id="driverPhone" name="driverPhone" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入司机电话"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">提箱</label>
                        <div class="layui-input-block">
                            <input id="getConPile" name="getConPile" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入提箱"/>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">进港码头</label>
                        <div class="layui-input-block">
                            <input id="returnConPile" name="returnConPile" type="text" class="layui-input"  autocomplete="off"
                                   lay-verType="tips" lay-verify="" placeholder="请输入进港码头"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-md12">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea id="remark" name="remark" class="layui-input"
                                      cols="50" rows="5" placeholder="请输入备注"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <div class="layui-row">
                    <div id="qrcode"></div>
                    <p>运单码</p>
                    <!--<input id="qrcode" name="qrcode" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入二维码"/>-->
                </div>
            </div>
        </div>
    </form>
</script>

<!-- js部分 -->
<% include("../layout/js.html"){} %>
<script type="text/javascript" src="${ctxPath}/assets/js/verification.js"></script>

<script type="text/javascript">
    layui.use(['layer', 'form', 'formX', 'table', 'util', 'admin', 'zTree', 'tableX','laydate','QRCode', 'dropdown', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var tableX = layui.tableX;
        var util = layui.util;
        var admin = layui.admin;
        var formX = layui.formX;
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var upload = layui.upload;


        laydate.render({
            elem: '#packDateSearch'
            ,type: 'date'
            ,range: '~'
            // ,format: 'yyyy-MM-dd HH:mm:ss'
            ,format: 'yyyy-MM-dd'
            ,calendar: true
            /*,mark: {
                '0-4-28': '生日'
                ,'0-12-31': '跨年' //每年12月31日
                ,'0-0-10': '工资' //每个月10号
                ,'2020-8-20': '预发' //如果为空字符，则默认显示数字+徽章
                ,'2020-8-21': '发布'
            }*/
            ,done: function(value, date){
                setTimeout(function(){
                    $("#searchSubmit").click();
                }, 10)
            }
        });

        // 渲染表格
        let insTb = tableX.render({
            elem: '#billTable'
            ,url: 'bill/list'
            ,page: true
            ,toolbar: false
            ,cellMinWidth: 100
            ,cols: [[
                {type: 'checkbox'}
                ,{type: 'numbers', title: '序号'}
                ,{field: "id", minWidth: "60", title: "id", sort: false, hide:true }
                // ,{field: "relUserId", minWidth: "60", title: "运单关联用户id", sort: false, hide:false }
                ,{field: "score", minWidth: "60", width: "60", title: "评分", sort: false, hide:false, templet: function (d) {
                        if(d.score) {
                            let scoreColor = parseFloat(d.score) >= 60? 'green': 'red';
                            const score = '<span style="color: ' + scoreColor + '">' + d.score + '</span>'
                            return score;
                        } else {
                            return ''
                        }
                    }
                }
                ,{field: "packDate", minWidth: "60", width: "120", title: "做箱日期", sort: false, hide:false }
                ,{field: "customer", minWidth: "60", width: "105", title: "客户名称", sort: false, hide:false }
                ,{field: "factoryAddress", minWidth: "60", width: "300", title: "工厂地址", sort: false, hide:false }
                ,{field: "contactsPhone", minWidth: "60", width: "117", title: "联系电话", sort: false, hide:false }
                ,{field: "vessel", minWidth: "60", width: "130", title: "船名", sort: false, hide:false }
                ,{field: "voyage", minWidth: "60", width: "80", title: "航次", sort: false, hide:false }
                ,{field: "billOfLading", minWidth: "60", width: "150", title: "提单号", sort: false, hide:false }
                ,{field: "boxType", minWidth: "60", width: "70", title: "箱型", sort: false, hide:false }
                ,{field: "boxNum", minWidth: "60", width: "130", title: "箱号", sort: false, hide:false }
                ,{field: "sealno", minWidth: "60", width: "140", title: "封号", sort: false, hide:false }
                ,{field: "weight", minWidth: "60", width: "100", title: "箱门重量", sort: false, hide:false }
                ,{field: "serialno", minWidth: "60", width: "94", title: "序列号", sort: false, hide:false }
                ,{field: "carNo", minWidth: "100", title: "车牌", sort: false, hide:false }
                ,{field: "driverPhone", minWidth: "120", title: "司机电话", sort: false, hide:false }
                ,{field: "getConPile", minWidth: "120", title: "提箱", sort: false, hide:false }
                ,{field: "returnConPile", minWidth: "120", title: "进港码头", sort: false, hide:false }
                ,{field: "remark", minWidth: "250", title: "备注", sort: false, hide:false }
                /*,{field: "qrcode", minWidth: "60", title: "二维码", sort: false, hide:false ,templet: function (d) {
                        let qrCode
                        return util.toDateString(d.qrcode);
                    }
                }*/
                /*,{field: "contacts", minWidth: "60", title: "联系人", sort: false, hide:true }
                ,{field: "driver", minWidth: "60", title: "司机", sort: false, hide:true }
                ,{field: "recordPeople", minWidth: "60", title: "录单员", sort: false, hide:true }
                ,{field: "getBoxLastDate", minWidth: "60", title: "最晚提箱时间", sort: false, hide:true }
                ,{field: "privatecode", minWidth: "60", title: "私有码", sort: false, hide:true }
                ,{field: "importDate", minWidth: "60", title: "导入时间", sort: false, hide:true }
                ,{field: "orderNum", minWidth: "60", title: "排序", sort: false, hide:true }*/
                ,{field: "createUser", minWidth: "60", width: "100", title: "录单员", sort: false, hide:true }
                ,{field: "createName", minWidth: "60", width: "100", title: "录单员", sort: false, hide:false }
                ,{field: "createTime", minWidth: "60", width: "120", title: "创建时间", sort: false, hide:false ,templet: function (d) {
                        return util.toDateString(d.createTime);
                    }
                }
                ,{field: "updateTime", minWidth: "60", width: "120", title: "更新时间", sort: false, hide:true ,templet: function (d) {
                        return util.toDateString(d.createTime);
                    }
                }
                /*,{field: "updateUser", minWidth: "60", title: "更新人", sort: false, hide:true }
                ,{field: "del", minWidth: "60", title: "del(0正常 1删除)", sort: false, hide:true }
                ,{align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 200}*/
            ]]
            ,done: () => {
                $(".layui-table>tbody>tr>td:nth-child(7)>div").addClass("layui-table-cell-damon");
                $(".layui-table>tbody>tr>td:nth-child(9)>div").addClass("layui-table-cell-damon");
            }
        });

        //监听行单击事件（单击事件为：rowDouble）
        table.on('row(billTable)', function(obj){
            // console.log(obj.tr.attr("data-index"))
            //选中行样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            //选中radio样式
            obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
            // $('tr[data-index=' + obj.tr.attr("data-index") + '] input[type="radio"]').parent().find("i").click();
            /* obj.tr.find('input[type="radio"]').prop('checked', true);
             form.render('radio');*/
            /*var data = obj.data;

            layer.alert(JSON.stringify(data), {
                title: '当前行数据：'
            });

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');*/
//            $(obj.tr[0].outerHTML).attr("data-index")
        });

        //监听行双击
        table.on('rowDouble(billTable)', function(obj){
            var data = obj.data;
            showEditModel(data);
            // obj.tr.find("a[lay-event=edit]").trigger("click");//会跳出来两个一样的框 这个不好用
            //obj.tr.toggleClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行
        });

        // 添加
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 搜索
        form.on('submit(searchSubmit)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
        });

        $('.search_key').bind('keypress',function(event){
            if(event.keyCode == "13")
            {
                $("#searchSubmit").click();
            }
        });

        // 工具条点击事件
        table.on('tool(billTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDel(obj);
            }
        });

        // 删除
        function doDel(obj) {
            layer.confirm('确定要删除此订单吗？', {
                shade: .1,
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.post('bill/delete', {
                    ids: obj.data.id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload();
                        //obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        // 显示编辑弹窗
        function showEditModel(mBill) {
            admin.open({
                type: 1,
                maxmin:true,
                closeBtn:1,
                resize: true,
				area:["1100px","700px"],
                title: (mBill ? '修改' : '添加') + '订单管理',
                content: $('#modelBill').html(),
                success: function (layero, dIndex) {
                    var url = mBill ? 'bill/update' : 'bill/add';
                    form.val('modelBillForm', mBill);  // 回显数据
                    // 表单提交事件
                    form.on('submit(modelBillSubmit)', function (data) {
                        layer.load(2);
                        $.post(url, data.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
						$("button[lay-filter='modelBillSubmit']").attr("disabled","disabled");
                        setTimeout(function(){$("button[lay-filter='modelBillSubmit']").removeAttr("disabled");}, 1000 );
                        return false;
                    });
                    let QRCode = layui.QRCode;
                    // 二维码
                    let demoQrCode = new QRCode(document.getElementById("qrcode"), {
                        text: "Hello Word!",
                        width: 200,  // 宽度
                        height: 200,  // 高度
                        colorDark: "#000000",  // 颜色
                        colorLight: "#ffffff",  // 背景颜色
                        correctLevel: QRCode.CorrectLevel.H
                    });
                    // 更换内容
                    demoQrCode.makeCode("https://francjc.com:4331/verifyfile/?orderid="+mBill.id);

                    form.verify({
                        verification: function(value){
                            return GetCntr(value);
                        }
                    });

                    laydate.render({
                        elem: '#packDate' //指定元素
                        ,type: 'datetime'
                    });
                }
            });
        }
        // 导入
        //https://www.layui.com/demo/upload.html
        upload.render({
            elem: '#btnImport',
            url: 'bill/import',
            accept: 'file',
            exts: 'xls',
            before: function () {  // 上传前的回调
                layer.load(2);
            },
            done: function (res) {  // 上传完毕回调
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    insTb.reload();
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            },
            error: function () {  // 请求异常回调
                layer.closeAll('loading');
                layer.msg('导入失败', {icon: 2});
            }
        });

        let active = {
            delSelect: () => {
                let checkStatus = table.checkStatus('billTable')
                    ,data = checkStatus.data;
                // layer.alert(JSON.stringify(data));
                if(!data || data.length === 0){
                    layer.alert("请选择一条记录");
                    return false;
                }
                let bill_ids = "";
                for(let i=0; i < data.length; i++) {
                    bill_ids += data[i].id + ",";
                }
                layer.confirm('确定要删除此订单吗？', {
                    shade: .1,
                    skin: 'layui-layer-admin'
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.post('bill/delete', {
                        ids: bill_ids//data[0].id
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1});
                            insTb.reload();
                            //obj.del();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });

            },
            getCheckData: function(){ //获取选中数据
                let checkStatus = table.checkStatus('billTable')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                let checkStatus = table.checkStatus('billTable')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                let checkStatus = table.checkStatus('billTable');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        //https://www.layui.com/demo/table/operate.html
        $('.btnTableClick').on('click', function(){
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>
